<template>
  <div id="app">
    <Loading v-if="this.$root.loading"></Loading>
    <!--路由窗口-->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      socket:'',
      ip:''
    }
  },

  methods:{
      init(){
          // 实例化socket
          this.socket = new WebSocket(this.$ws+'/news')
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
          // 监听socket断开
          this.socket.close=this.close


      },
      open(){
          console.log("socket连接成功")
          const that=this;
          that.$axios.get(that.$url+'/api/index/getIp').then(function (ret) {
              that.$root.loading=false
              that.ip=ret.data.data.ip
              that.sendIpAddr(that.ip)
          });
      },
      error(){
        console.log("连接错误")
        this.$message({
          type:'error',
          message:'网络可能有些问题'
        })
          
      },
      getMessage(msg){
          const that=this;
          let data=JSON.parse(msg.data);
          if(data.isSystem){

              that.$message({
                  type: 'info',
                  message: data.message
              });
          }
      },
      close(){
        console.log("连接关闭");
      },
      // 发送消息给所有用户
      sendIpAddr(msg){
          msg='用户IP-'+msg+'-进入博客'
          if(this.socket.readyState===1){
            this.socket.send(msg);
          }
      },
      // 获取屏幕尺寸
      getScreenWidth(){
            let screenWidth=window.screen.width;

            if(screenWidth < 992){
                this.$alert('请使用电脑打开该系统', '提示', {
                    confirmButtonText: '好的',
                    type: 'warning',
                    customClass: 'myClass'
                })
                return '手机'
            }
            return '电脑'
      },

  },
  mounted(){
        this.init();
  },
}
</script>

<style>
body{
  background-color: #EBF0F1;

}
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* 去除手机端按下的色块 */
  -webkit-tap-highlight-color:transparent;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
img {
  /* 禁止长按保存图片 */
  pointer-events:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}
/* 占位盒子 */
.perchbox{
  min-height: 1vh;
}
/* a链接无下划线 */
a{
  text-decoration: none;
}
/* 字体颜色渐变 */
.transitionTextBg{
    color: #7F8AFF;
    background: linear-gradient(to right, red, blue);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
/* 鼠标悬浮变为小手 */
.app-pointer{
  cursor:pointer;
}

/**自定义弹框 */
.myClass{
    width: 80vw;
}

.alertClass{
    width: 300px;
}
</style>
